<template>
  <mutong-player
    style="z-index: 3"
    :player="player"
    ref="player"
    v-if="player.playauth"
    @ready="ready"
    @snapshoted="snapshoted"
    @pause="pause"
    @play="play"
    @endSeek="endSeek"
    @ended="ended"
  ></mutong-player>
</template>

<script>
  import MutongPlayer from 'mutong-ketang-player';
  export default {
    data() {
      return {};
    },
    computed: {
      player() {
        return {
          vid: this.vid,
          playauth: '',
          width: '100%',
          height: '100%',
          isJimu: true,
        };
      },
    },
    components: {
      MutongPlayer,
    },
    mounted() {
      if (this.vid || this.videoId) {
        this.vid = this.vid || this.videoId;
        this.getAuth();
      }
    },
    methods: {
      getAuth() {
        this.$service
          .VodPlayAuth({ videoId: this.vid })
          .then((res) => {
            this.$set(this.player, 'playauth', res);
            this.$forceUpdate();
          })
          .catch((err) => {});
      },
      ready() {
        console.log('ready go 🏍');
        this.playVideo();
      },
      play() {
        console.log('开始⏯');
      },
      ended() {},
      playVideo() {
        this.$refs.player && this.$refs.player.play();
      },
      seek(t) {
        this.$refs.player && this.$refs.player.seek(t || 0);
      },
      snap() {
        this.$refs.player && this.$refs.player.snapshot();
      },
      pause(res) {
        this.$refs.player && this.$refs.player.pause();
      },
      endSeek(e) {
        console.log(e.paramData.toTime);
      },
      snapshoted(data) {
        console.log('已截图准备去提供截图对象');
      },
    },
  };
</script>

<style lang="less">
  /* 圆角 */
  .prism-player,
  .prism-player video,
  .player-loading-component {
    // border-radius: 10px;
    width: 100%;
    height: 100%;
  }
  /* 控制按钮 */
  .prism-player .prism-controlbar {
    // border-radius: 0px 0px 10px 10px;
  }
  .prism-player .prism-controlbar .prism-controlbar-bg {
    // border-radius: 0 0 10px 10px;
  }
</style>
